<template>
    <!-- 项目排行 -->
    <div class="main-container">
        <!-- 行内表单 -->

            <el-form :inline="true" :model="queryParams" class="filter-container" label-width="100px">

                <el-form-item class="filter-item">
                    <el-select
                      v-model="queryParams.type"
                      prefix-icon="el-icon-search"
                      placeholder="请选择排行范围"
                      display:inline-block
                      clearable
                      @clear="loadData" >
                        <el-option label="前10名" value="1"></el-option>
                        <el-option label="前30名" value="3"></el-option>
                        <el-option label="前50名" value="5"></el-option>
                    </el-select>
                  <el-button type="primary" plain @click="handleSearch()">查询</el-button>
                </el-form-item>
                 </el-form>
        <!-- 展示表格 -->
      <div class="table-box">
        <el-table  :header-cell-style="{ textAlign: 'center' }"
            :data="tableData"
            v-loading="TableDataLoading"
            :element-loading-text="loadingText">
            <el-table-column prop="index" label="排名" type="index">
            </el-table-column>
            <el-table-column prop="name" label="项目名称" align="center">
            </el-table-column>
			<el-table-column prop="projectPerson" label="负责人"align="center">
			</el-table-column>
            <el-table-column prop="projectType" label="项目类型"align="center">
            </el-table-column>
            <el-table-column prop="thisDept" label="所属部门"align="center">
            </el-table-column>
            <el-table-column prop="allScore" label="总得分"align="center">
            </el-table-column>
        </el-table>
    </div>
    </div>
</template>

<script>

import {rankList} from '@/api/project'

export default {
  name:'ProjectRank',
    data() {
        return {
            // 后端接口
            queryParams: {
				type: '1'
            },
            tableData: [],
          TableDataLoading:false,
          loadingText:''
        }
    },
    // 钩子函数
    created() {
        this.loadData()
    },
    methods: {
      handleSearch(){
    /*    this.currentPage4 = 1*/
        this.loadData()
      },
        // 获取数据
        loadData() {
          // this.TableDataLoading = true
          // this.loadingText = '正在查询数据...'

            let params = {
                            // 加载请求参数
                ...this.queryParams,
            }
			this.$axios.get("http://127.0.0.1:8089/project/ranklist/" + this.queryParams.type).then((resp) => {
				console.info(resp.data.data.project)
				this.tableData = resp.data.data.project;
				this.tableData.forEach((item) => {
					item.index = index + 1
				})
			})
            // this.axios.get("http://127.0.0.1:8089/project/ranklist/" + type).then((resp) => {
            //     console.info(resp)
            //     this.tableData = resp.data.rows;
            //     this.tableData.forEach((item) => {
            //         item.index = index + 1
            //     })
            // })
        },
        searchReset() {
            this.queryParams = {}
            this.loadData()
        }
    }
}
</script>

<style>
.filter-container {
  /* padding: 8px 64px 16px 0;*/
  text-align:center
}
.filter-item:not(:last-child) {
  margin-right: 16px;
}

.filter-item {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
}
.table-box{
  margin:0 32px;
}
.page-container {
  float: right;
  padding:0 16px 16px;
}
.main-container{
  height: 100%;
}
</style>
